<template>
  <div class="sector">
    <el-form :model="addUserData" label-width="140px" size="medium">
      <el-form-item label="客户姓名">
        <el-select v-model="addUserData.userID" placeholder="请选择">
          <template>
            <el-option
              v-for="item in userData.gotUsers"
              :key="item.value"
              :label="item.account"
              :value="item._id"
              :disabled="item.role === 2 ? true : false"
            >
            </el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆ID">
        <el-select v-model="car" placeholder="请选择">
          <el-option
            v-for="(item, index) in carData.data"
            :key="index"
            :label="item.model"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="租金" style="width: 490px">
        <el-input v-model="addUserData.spentMoney"></el-input>
      </el-form-item>
      <el-form-item label="几座" style="width: 490px">
        <el-input v-model="addUserData.seat"></el-input>
      </el-form-item>
      <el-form-item label="租车日期" prop="realName">
        <el-date-picker
          v-model="addUserData.startTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        >
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="add(addUserData)"
            >立即新增</el-button
          >
          <el-button>重置</el-button>
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("order");
const {
  mapState: _umapState,
  mapActions: _umapActions,
} = createNamespacedHelpers("user");
const {
  mapState: _cmapState,
  mapActions: _cmapActions,
} = createNamespacedHelpers("car");

const { mapMutations: publicMutations } = createNamespacedHelpers(
  "publicStore"
);
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          //设置可选日期今天及今天以后
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      value: "",
      car: "",
      carList: [],
      addUserData: {
        userID: "",
        carID: "",
        spentMoney: "", //租金
        startTime: "", //开始时间
        spentTime: "", //花费的天数
        endTime: "",
        seat: "",
        ownerID: "",
      },
    };
  },
  computed: {
    ..._umapState(["userData"]),
    ..._cmapState(["carData"]),
  },
  created() {
    this.getAllUsers();
    const datas= this.findAllCar();
    console.log('sssssdfff',datas);
    
    this.setNowBreadcrumb("addorder");
  },
  watch: {
    async car(_id) {
      const data = await this.findCarByID(_id);
      this.addUserData.ownerID = data.userID;
      console.log("====================", data);
      this.addUserData.spentMoney = data.rent;
      this.addUserData.seat = data.seat;
      this.addUserData.carID = data._id;
    },
  },
  methods: {
    ...mapActions(["addOrder"]),
    ..._umapActions(["getAllUsers"]),
    ..._cmapActions(["findAllCar", "findCarByID"]),
    ...publicMutations(["setNowBreadcrumb"]),
    add(params) {
      this.addUserData.endTime = params.startTime[1];
      this.addUserData.startTime = params.startTime[0];
      //计算天数
      this.addUserData.spentTime = this.dateDiff(
        this.addUserData.startTime,
        this.addUserData.endTime
      );
      this.getTimeNow();
      console.log("000000", this.addUserData);
      this.addOrder(this.addUserData);
    },
    getTimeNow() {
      const now = new Date();
      const hour = now.getHours(); //得到小时
      const minu = now.getMinutes(); //得到分钟
      const nowTime = hour + "-" + minu;
      this.addUserData.startTime = this.addUserData.startTime + " " + nowTime;
      this.addUserData.endTime = this.addUserData.endTime + " " + nowTime;
    },
    /**
     * 两个日期相隔天数,时间格式：yyyy-MM-dd
     * 第一个参数不传， 表示当前日期
     */
    dateDiff(sDate, eDate) {
      var sArr = sDate.split("-");
      var eArr = eDate.split("-");
      var sRDate = new Date(sArr[0], sArr[1], sArr[2]);
      var eRDate = new Date(eArr[0], eArr[1], eArr[2]);
      var result = (eRDate - sRDate) / (24 * 60 * 60 * 1000);
      return result;
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>